<template>
  <van-nav-bar
    title="种草推荐"
    left-arrow
    @click-left="router.back()"
    @click-right="router.push('/add-article')"
  >
    <template #right>
      <van-icon name="add-o" />
    </template>
  </van-nav-bar>
  <div class="content">
    <van-list
      :finished="finished"
      v-model:loading="loading"
      @load="onLoad"
      :offset="10"
      finished-text="没有更多了"
    >
      <van-card
        class="item"
        @click="router.push(`/article-detail?articleId=${article.id}`)"
        v-for="article in list"
        :thumb="article.pic_url"
        :key="article.id"
      >
        <template #title>
          <p class="title">
            {{ article.title }}
          </p>
        </template>
        <template #desc>
          <p class="detail">{{ article.detail }}</p>
        </template>
        <template #price>
          <p class="desc">
            {{ article.desc }}
          </p>
        </template>
        <template #num>
          <p>{{ article.created_at }}</p>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getComments } from "@/api/commend";
import usePagePaging from "@/hooks/usePagePaging";

let router = useRouter();

// 使用hooks 滚动翻页很多页面需要用到所以使用hooks       滚动事件
let { onLoad, list, loading, finished } = usePagePaging(getComments, {
  limit: 10,
  page: 1,
});
</script>

<style scoped lang="less">
.content {
  :deep(.van-list__finished-text){
    padding-bottom: 50px;
  }
  .item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .title {
      font-size: 16px;
      color: black;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .detail {
      margin-top: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: rgb(105, 105, 105);
    }

    .desc {
      color: rgb(105, 105, 105);
      font-weight: normal;
    }
  }
}
</style>

